<template>
  <div class="register-page">
    <login-header title="注册bilibili"></login-header>
    <login-input label="用户名" placeholder="请输入用户名" rule="^.{4,12}$" type="text" style="margin-bottom: 15px;"
      @inputHandler="res => (model.name = res.flag ? res.value : '')"></login-input>
    <login-input label="账号" placeholder="请输入账号" rule="^.{4,12}$" type="text"
      @inputHandler="res => (model.username = res.flag ? res.value : '')"></login-input>
    <login-input label="密码" placeholder="请输入密码" rule="^.{4,12}$" type="password"
      @inputHandler="res => (model.password = res.flag ? res.value : '')"></login-input>
    <div class="btns">
      <button class="LoginBtn" @click="$router.push('/login')">登录</button>
      <button class="RegisterBtn" @click="registerHandler">同意并注册</button>
    </div>
  </div>
</template>

<script>
import LoginHeader from '../components/common/LoginHeader'
import LoginInput from '../components/common/LoginInput'
import { Dialog, Notify } from 'vant'
export default {
  data () {
    return {
      model: {
        name: '',
        username: '',
        password: ''
      }
    }
  },
  components: {
    LoginHeader,
    LoginInput
  },
  methods: {
    async registerHandler () {
      if (this.model.name && this.model.username && this.model.password) {
        const res = await this.$http.post('/register', this.model)
        console.log(res)
        if (res.status === 200) {
          Notify({ type: 'success', message: '注册成功' })
        }
      } else {
        Dialog({ message: '请输入4-12位的数字、字母或字符' })
      }
    }
  }
}
</script>

<style lang="scss"  scoped>
.register-page {
  .btns {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    .LoginBtn {
      color: #fb7299;
      border: 1px solid #fb7299;
    }
    .RegisterBtn {
      color: white;
      background: #ff9db5;
    }
  }
  button {
    width: 150px;
    height: 40px;
    padding: 0 9.6px;
    font-size: 13.4px;
    border: none;
    border-radius: 5px;
  }
}
</style>
